<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" size="32x32" href="/assets/media/favicon-32x32.png">
  <link rel="icon" type="image/png" size="16x16" href="/assets/media/favicon-16x16.png">

  <title>文言 Wenyan Online IDE</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/hint/show-hint.css" />
  <link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/wenyan-lang/highlight/wenyan-light.codemirror.css'/>
  <link rel='stylesheet' type='text/css' href='/assets/css/ide.css'/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/runmode/runmode.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/mode/simple.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/selection/active-line.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/hint/show-hint.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/javascript/javascript.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/python/python.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/ruby/ruby.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/wenyan-lang/highlight/codemirror.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
  <script src="https://code.iconify.design/1/1.0.0-rc1/iconify.min.js"></script>
  <script src="https://unpkg.com/@wenyanlang/wyg"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
  <script src="./dist/core.js"></script>
  <script src="./dist/examples.js"></script>
  <script src="./dist/render.js"></script>
</head>

<body>
  <div id="ex-outer">
    <div class="bar" id="explorer-bar">
      <span class="title">文言 Wenyan</span>
      <div class="right-aligned">
        <button id="new-file" class="icon">
          <span class="iconify" data-icon="mdi:plus" data-inline="false"></span>
        </button>
      </div>
    </div>
    <div id="explorer">
      <ul id="explorer-list">
        <li>
          <div class="caret">My Scripts</div>
          <ul class="nested active" id="explorer-list-user">
          </ul>
        </li>
        <li>
          <div class="caret">Examples</div>
          <ul class="nested active" id="explorer-list-examples">
          </ul>
        </li>
        <li id="explorer-packages">
          <div class="caret">文淵閣 Packages</div>
          <ul class="nested active" id="explorer-list-packages">
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <div id="in-outer">
    <div class="bar" id="in-bar">
      <span id="current-file-name" class="title"></span>
      <button id="crun" class="icon">
        <span class="iconify" data-icon="mdi:play" data-inline="false"></span>
      </button>
      <button id="compile">Compile</button>
      <button id="config-strict" class="checkbox" data-config="strict">
        <span class="iconify" data-icon="mdi:check" data-inline="false"></span>
        <label>Typecheck</label>
      </button>
      <div class="right-aligned">
        <button id="delete-current" class="icon">        
          <span class="iconify" data-icon="mdi:trash-can-outline" data-inline="false"></span>
        </button>
        <button id="download-current" class="icon">
          <span class="iconify" data-icon="mdi:download" data-inline="false"></span>
        </button>
      </div>
    </div>
    <div id="in"></div>
  </div>
  
  <div id="js-outer">
    <div class="bar" id="js-bar">
      <span class="title">Compiled</span>
      &nbsp;
      <button id="run" class="icon">
        <span class="iconify" data-icon="mdi:play" data-inline="false"></span>
      </button>
      <button class="dropdown" id="config-romanize" data-config="romanizeIdentifiers">
        <label>Romanization</label>
        <span class="value">none</span>
        <span class="iconify" data-icon="mdi:menu-down" data-inline="false"></span>
        <select></select>
      </button>
      <button class="dropdown" id="config-lang" data-config="lang" experiment="true">
        <span class="value">Javascript</span>
        <span class="iconify" data-icon="mdi:menu-down" data-inline="false"></span>
        <select></select>
      </button>
      <button id="cofig-hide-imported" class="checkbox" data-config="hideImported">
        <span class="iconify" data-icon="mdi:check" data-inline="false"></span>
        <label>Hide Imported</label>
      </button>
      
      <div class="right-aligned">
        <button id="help-button" class="icon">
          <span class="iconify" data-icon="mdi:help-circle-outline" data-inline="false"></span>
        </button>
        <button id="config-dark" class="icon" data-config="dark">
          <span id="dark-icon-night" class="iconify" data-icon="mdi:weather-night" data-inline="false"></span>
          <span id="dark-icon-sunny" class="iconify hidden" data-icon="mdi:weather-sunny" data-inline="false"></span>
        </button>
      </div>
    </div>
    <div id="js" class="cm-s-wenyan-light"></div>
  </div>
  
  <div id="out-outer">
    <div class="bar" id="out-bar">
      <span class="title">Output</span>
      <button id="config-output-hanzi" class="checkbox" data-config="outputHanzi">
        <span class="iconify" data-icon="mdi:check" data-inline="false"></span>
        <label>Print Hanzi</label>
      </button>
      <button id="config-enable-packages" class="checkbox" data-config="enablePackages">
        <span class="iconify" data-icon="mdi:check" data-inline="false"></span>
        <label>Use 文淵閣 Packages</label>
      </button>
      <div class="right-aligned">
        <button id="rend">Render Book</button>
        <button id="download-render" class="icon">
          <span class="iconify" data-icon="mdi:download" data-inline="false"></span>
        </button>
      </div>
    </div>
    <iframe src='/ide_executer.html' id="out-iframe"></iframe>
    <pre id="out-render"></pre>
  </div>

  <div id="help-panel" class="panel hidden">
    <div class="title">Shortcuts</div>
    
    <table id="shortcut-table">
      <tr><td>Shift + Enter</td><td>Execute</td></tr>
      <tr><td>Alt + Enter</td><td>Compile</td></tr>
    </table>

    <a href="/old_ide.html"><button>Legacy IDE</button></a>
    <a href="https://github.com/wenyan-lang/wenyan" target="__blank"><button>Github</button></a>
    <a href="https://github.com/wenyan-lang/wenyan/wiki" target="__blank"><button>Wiki</button></a>
    <a href="https://wenyan-snippets.glitch.me/" target="__blank"><button>Snippets</button></a>
    <a href="https://github.com/wenyan-lang/wyg" target="__blank"><button>文淵閣</button></a>

    <br><br>

    <div class="details">All changes are auto-saved.</div>
  </div>

  <div id="package-info-panel" class="panel hidden">
    <div class="title">{name}</div>
    <div class="section description">{description}</div>
    <div class="details">
      by <a class="author">{author}</a>
    </div>

    <br>

    <a class="home-link" href="" target="_blank"><button>Goto Homepage</button></a>
    <button class="import">Import into current script</button>

    <button class="close icon" onclick='closePackageInfo()'>
      <span class="iconify" data-icon="mdi:close" data-inline="false"></span>
    </button>
  </div>

  <div id="hand-ex"><div id="hand-ex-inner"></div></div>
  <div id="hand-h"><div id="hand-h-inner"></div></div>
  <div id="hand-v"><div id="hand-v-inner"></div></div>

  <div id="keywords"></div>

  <script src="/assets/js/ide.js"></script>
</body>
</html>
